@import "_settings"

#team-members
  .sort-by-distance-button
    display: inline-block
    padding: .4em .7em .45em
    font-weight: bold
    font-size: .5em
    text-transform: uppercase
    line-height: 1
    border: none
    background: $medium
    color: white
    border-radius: 3px
    position: relative
    cursor: pointer
    float: right
    margin-top: .3em
    i
      margin-right: .25em
      &:last-child
        margin-right: 0
    &[disabled]
      opacity: .7
      cursor: default
  .vuer
    display: flex
    padding: 25px 0
    border-bottom: 1px dotted #ddd
    &:first-of-type
      margin-top: 15px
    &:last-of-type
      border-bottom: none
    .avatar
      flex: 0 0 80px
      img
        border-radius: 50%
        object-fit: cover
    .profile
      padding-left: 26px
      flex: 1
      h3
        margin: 0
        font-size: 1.3em
        &::before, &::after
          display: none
        & > sup
          text-transform: uppercase
          font-size: .7em
          letter-spacing: .3px
          padding: 2px 5px
          margin-left: 10px
          color: transparentify($dark, #f9f7f5, .6)
          background: #f9f7f5
          border-radius: 5px
      // NOTE: Removing the little signal icon for now
      // .distance
      //   position: relative
      //   &:before
      //     content: "\f1eb"
      //     font-family: FontAwesome
      //     position: absolute
      //     top: 50%
      //     margin-top: -.5em
      //     line-height: 1
      //     right: 100%
      //     transform: rotate(-90deg)
      .user-match
        cursor: help
        color: steelblue
        &:after
          content: "\f06a"
          font-family: FontAwesome
          font-size: .75em
          vertical-align: super
          margin-left: 4px
          margin-right: 2px
          position: relative
      dl
        margin: .6em 0 0
      dt, dd, ul, li
        display: inline
        padding: 0
        margin: 0
        line-height: 1.3
      dt
        text-transform: uppercase
        font-size: .84em
        font-weight: 600
        &::after
          content: ""
          margin-right: 7px
        i
          width: 14px
          text-align: center
          &.fa-map-marker
            font-size: 1.15em
          &.fa-globe
            font-size: 1.2em
          &.fa-link
            font-size: 1.05em
      dd
        font-weight: 600
        &::after
          display: block
          content: " "
          margin-top: .6em
      li
        display: inline-block
        &::after
          display: inline-block
          content: "·"
          margin: 0 8px
        &:last-child::after
          content: ""
      .social
        a
          display: inline-block
          line-height: 1
          vertical-align: middle
          margin-right: 4px
          &.github, &.codepen
            color: #000
          &.twitter
            color: #1da1f3
          &.linkedin
            color: #0077B5
        i
          vertical-align: text-bottom
          font-size: 1.3em

@media (max-width: 640px)
  #team-members
    .vuer
      .profile
        h3
          sup
            display: inline-block
            margin-left: 0
